import './App.less'
import { Breadcrumb, Layout, theme } from 'antd';
import { BeforeRouterEnter } from './router'
import SiderDom from './Layout/Sider';
import { useNavigate } from "react-router-dom"

const { Header, Content, Footer, Sider } = Layout;

function App() {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  let navigateTo = useNavigate();

  const logOut = () => {
    localStorage.removeItem('admin-token')
    navigateTo('/login')
  }
  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 左侧菜单 */}
      <SiderDom/>
      {/* 右侧内容 */}
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} >
          <div style={{ float: 'right', padding: '0 20px', cursor: 'pointer' }} onClick={() => {logOut()}}>退出</div>
        </Header>
        <Content style={{ margin: '0 16px' }}>
          {/* <Breadcrumb style={{ margin: '16px 0' }} items={[
            { title: 'Home' },
            { title: 'Application Center' },
            { title: 'Application List' },
            { title: 'An Application' }
          ]}>
          </Breadcrumb> */}
          <Breadcrumb style={{ margin: '16px 0' }} items={[]}>
          </Breadcrumb>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <BeforeRouterEnter/>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  )
}

export default App
